<template>
  <footer>
    <Logo :src="require('../assets/_logo.png')" color="#fff">大桌蹄子</Logo>
    <Title subcolor="rgba(255, 255, 255, .1)">
      <template slot="title">联系我们</template>
      <template slot="subtitle">Contact us</template>
    </Title>
    <ul class="QRcode">
      <li v-for="(item, index) in qrCodeData" :key="index">
        <QRCode
          :icon="item.icon"
          :src="item.src"
          :alt="item.alt"
          :offsetTop="item.offsetTop"
          >{{ item.name }}</QRCode
        >
      </li>
    </ul>
    <ul class="message">
      <li>地址：桂林电子科技大学</li>
      <li>电话：666-3456</li>
      <li>邮箱：12345678@qq.com</li>
      <li>邮编：541004</li>
    </ul>
    <p class="right">
      Copyright © 2019 桂林电子科技大学-卓严钊. All rights reserved.
    </p>
  </footer>
</template>

<script>
import Title from "./Title.vue";
import Logo from "./Logo.vue";
import QRCode from "./QRCode.vue";

export default {
  components: {
    Title,
    Logo,
    QRCode,
  },
  data() {
    return {
      qrCodeData: [
        {
          name: " QQ号",
          icon: ["fa", "fa-qq"],
          src: require("../assets/QRcode.png"),
          alt: "QQ",
          offsetTop: -10,
        },
        {
          name: " 微信",
          icon: ["fa", "fa-wechat"],
          src: require("../assets/QRcode.png"),
          alt: "微信",
          offsetTop: -40,
        },
        {
          name: " 微博",
          icon: ["fa", "fa-weibo"],
          src: require("../assets/QRcode.png"),
          alt: "微博",
          offsetTop: -70,
        },
      ],
    };
  },
};
</script>

<style lang="less" scoped>
#logo {
  position: absolute;
  bottom: 0;
  right: 0;
}
footer {
  position: relative;
  height: 696px;
  background: url(../assets/footer.png) no-repeat center top / cover;
  color: #fff;

  .logo {
    position: absolute;
    bottom: 0;
    right: 0;
  }
  #title {
    position: absolute;
    top: 374px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-block;
  }
  ul.QRcode {
    position: absolute;
    bottom: 50px;
    display: flex;
    flex-flow: column nowrap;
    align-items: flex-start;
  }
  ul.message {
    position: absolute;
    left: 50%;
    bottom: 80px;
    transform: translateX(-50%);
    font-size: 20px;
    line-height: 32px;
    list-style: none;
  }
  p.right {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 8px;
    text-align: center;
  }
}
</style>